<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        #app{
            width:400px;
            margin: 350px auto;
        }
        #main{
            background-image: url("image/user_login_background.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body id="main">

<div id="app">
    <el-form :model="userinfo" :rules="rules" ref="userinfo" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机号：" prop="telephone">
            <el-input onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="11" v-model="userinfo.telephone" type="text" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
            <el-input v-model="userinfo.password"  type="password" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
            <el-button type="primary" @click=login()>登录</el-button>
            <el-button @click=main()>返回</el-button>
        </el-form-item>
        <el-from-item style="margin-left: 100px; ">
            <a href="/cai/forgotPsd.html">忘记密码</a>
        </el-from-item>
        <el-from-item style="margin-left: 105px;">
            <a href="/cai/userRegister.html">未注册 快速注册</a>
        </el-from-item>
    </el-form>

</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            userinfo:{},
            rules:{
                telephone: [
                    { required: true, message: '请输入11位手机号', trigger: 'blur' },
                    {
                        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                        message: '请输入正确电话号码',
                        trigger: 'blur'
                    }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            }
        },
        methods:{
            main:function(){
                window.location.href = "/cai/index.html";
            },
            login:function(){
                app.$refs["userinfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/consumer/record",app.userinfo,function(backData){
                            if(backData.code==1){
                                app.$notify.success({
                                    title: '温馨提示',
                                    message: backData.msg,
                                    position: 'top-right'
                                });
                                window.location.href="/cai/indexTwo.html";
                            }else if(backData.code == 4){
                                window.location.href = "/cai/businessMain.html"
                            }else {
                                app.$notify.error({
                                    title: '温馨提示',
                                    message: backData.msg,
                                    position: 'top-right'
                                });
                            }
                        });
                    }
                });
            }
        }
    });
</script>

</body>
</html>
